<template>
  <div class="about">
    <h1>随窗口调整布局</h1>
    <el-row>
      <el-col :span="24">
        <div id="bar"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="line"></div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
// 引入 ECharts 主模块
let echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  name: "about",
  data() {
    return {
      screenWidth: document.body.clientWidth,
      barChart: null,
      lineChart: null
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    };
    this.drawbar();
    this.drawLine();
  },
  watch: {
    screenWidth(val) {
      this.barChart.resize();
      this.lineChart.resize();
    }
  },
  methods: {
    drawbar() {
      this.barChart = echarts.init(document.getElementById("bar"));
      // 绘制图表
      let option = {
        title: {
          text: "ECharts resize"
        },
        tooltip: {},
        xAxis: {
          data: ["Population", "GDP", "CPI", "GIO"]
        },
        yAxis: {},
        series: [
          {
            name: "total",
            type: "bar",
            data: [10, 20, 2, 12]
          }
        ]
      };
      this.barChart.setOption(option);
    },
    drawLine() {
      this.lineChart = echarts.init(document.getElementById("line"));
      let option = {
        legend: {
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "TOM",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          },
          {
            name: 'JERRY',
            data: [280, 132, 501, 234, 1110, 1130, 1420],
            type: "line"
          }
        ]
      };
      this.lineChart.setOption(option);
    }
  }
};
</script>
 
<style>
#bar,
#line {
  width: 50%;
  height: 400px;
  margin: 0 auto;
}
</style>
